<template>
	<Echarts container="accepted-project-ratio" :options="option()" :height="330" />
</template>
<script lang="ts" setup>
	import { ref } from 'vue'
	import * as echarts from 'echarts'
	import dayjs from 'dayjs'
	import { requireImg } from '../../../utils/common'
	interface Props {
		data?: any
		legendLineHeight?: number
	}
	const props = withDefaults(defineProps<Props>(), {
		data: () => [
			{
				value: 114,
				name: '出租车',
				icon: 'image://' + requireImg('global/pipe-legend1.png'),
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						1,
						0,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(15, 84, 153, 0.396)',
							},
							{
								offset: 1,
								color: 'rgba(115, 208, 255, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
			{
				value: 71,
				name: '网约车',
				icon: 'image://' + requireImg('global/pipe-legend2.png'),
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						1,
						0,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(77, 255, 181, 1)',
							},
							{
								offset: 1,
								color: 'rgba(11, 77, 44, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
			{
				value: 80,
				name: '公交',
				icon: 'image://' + requireImg('global/pipe-legend3.png'),
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						1,
						0,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(229, 229, 229, 1)',
							},
							{
								offset: 1,
								color: 'rgba(117, 117, 117, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
			{
				value: 75,
				name: '地铁',
				icon: 'image://' + requireImg('global/pipe-legend4.png'),
				itemStyle: {
					color: new echarts.graphic.LinearGradient(
						1,
						0,
						0,
						0,
						[
							{
								offset: 0,
								color: 'rgba(255, 200, 89, 1)',
							},
							{
								offset: 1,
								color: 'rgba(153, 105, 38, 1)',
							},
						],
						false,
					), // 渐变
				},
			},
		],
		legendLineHeight: 0,
	})

	const option = () => {
		let opt = {
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgba(49, 59, 79, 0.8)',
				borderWidth: 1,
				borderColor: 'rgba(255, 255, 255, 0.2)',
				textStyle: {
					color: '#fff',
					fontSize: 30,
				},
			},
			legend: {
				orient: 'vertical',
				right: '20%',
				top: 'center',
				data: props.data,
				itemWidth: 20,
				itemHeight: 20,
				textStyle: {
					color: '#aaa',
					lineHeight: props.legendLineHeight,
					fontSize: 28,
					rich: {
						a: {
							color: '#fff',
							fontSize: 26,
							width: 140,
						},
						b: {
							color: '#fff',
							fontSize: 35,
						},
					},
				},
				formatter: function (name: any) {
					let tatol: any = props.data.reduce((prev: any, item: any) => prev + item.value, 0)

					let r: any = props.data.find((d: any) => d.name == name)!.value / tatol
					return ` {a|${name}}{b|${r.toFixed(2) * 100}} %`
				},
			},
			graphic: {
				elements: [
					{
						type: 'image',
						style: {
							image: requireImg('global/pipe-img2.png'), //你的图片地址
							width: 300,
							height: 300,
						},
						left: '33.5%',
						top: 'center',
					},
					{
						type: 'image',
						style: {
							image: requireImg('global/pipe-img1.png'), //你的图片地址
							width: 300,
							height: 300,
						},
						left: '33.5%',
						top: 'center',
					},
				],
			},
			series: [
				{
					type: 'pie',
					center: ['33.5%', '50%'],
					radius: ['35%', '88%'],
					avoidLabelOverlap: false,
					padAngle: 5,
					itemStyle: {
						borderRadius: 0,
					},
					label: {
						show: false,
						position: 'center',
					},
					emphasis: {
						disabled: false,
						scale: false,
					},
					labelLine: {
						show: false,
					},
					data: props.data,
				},
			],
		}
		return opt
	}
</script>

<style lang="scss" scoped></style>
